<template>
    <el-dialog v-model="dialogFormVisible" title="添加产品入库" width="600px" align-center draggable>
        <div class="dialog-content">
            <el-form :model="formData" label-width="120" style="max-width: 600px" :rules="rules" label-position="left">
                <el-form-item label="入库编号" prop="product_id">
                    <el-input v-model="formData.product_id" disabled />
                </el-form-item>
                <el-form-item label="产品名称" prop="product_name">
                    <el-input v-model="formData.product_name" />
                </el-form-item>
                <el-form-item label="产品类别" prop="product_category">
                    <el-select v-model="formData.product_category" placeholder="请选择产品类别">
                        <el-option label="服装类" value="服装类" />
                        <el-option label="食品类" value="食品类" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品单位" prop="product_unit">
                    <el-select v-model="formData.product_unit" placeholder="请选择产品单位">
                        <el-option label="个" value="个" />
                        <el-option label="件" value="件" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入库数量" prop="product_inwarehouse_number">
                    <el-input v-model="formData.product_inwarehouse_number" />
                </el-form-item>
                <el-form-item label="入库单价/元" prop="product_single_price">
                    <el-input v-model="formData.product_single_price" />
                </el-form-item>
                <el-form-item label="入库操作人" prop="product_create_person">
                    <el-input v-model="formData.product_create_person" />
                </el-form-item>
                <el-form-item label="入库备注" prop="in_memo">
                    <el-input v-model="formData.in_memo" :rows="2" type="textarea" />
                </el-form-item>
                <!-- <el-form-item label="部门" prop="department">
                    <el-select v-model="formData.department" placeholder="请选择部门">
                        <el-option v-for="(item, index) in departmentData" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item> -->
            </el-form>
        </div>
        <!-- 底部内容 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addProduct">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
    import { ref, reactive, defineExpose, defineEmits, toRaw } from 'vue'
    // import { createAdmin } from '@/api/userinfo.js'
    import { ElMessage } from 'element-plus'
    import { createProduct } from '@/api/product.js'
    import { bus } from '@/utils/mitt'
    const emit = defineEmits(['success'])

    // const departmentData = ref([])
    // const getdepartment = async () => {
    //     const res: any = await getDepartment()
    //     departmentData.value = JSON.parse(res.result)
    // }
    // getdepartment()
    //产品入库
    const addProduct = async () => {
        const res: any = await createProduct(formData)
        if (res.status === 0) {
            ElMessage.success({
                message: '产品入库成功',
                type: 'success'
            })
            formData.product_id = null
            formData.product_name = ''
            formData.product_category = ''
            formData.product_unit = ''
            formData.product_inwarehouse_number = null
            formData.product_single_price = null
            formData.in_memo = ''

            emit('success')
            dialogFormVisible.value = false
        } else {
            ElMessage.error('产品入库失败')
        }
    }

    interface FormData {
        product_id: number
        product_name: string
        product_category: string
        product_unit: string
        product_inwarehouse_number: number
        product_single_price: number,
        product_create_person: string,
        in_memo: string
    }

    const formData: FormData = reactive({
        product_id: Date.now(),
        product_name: '',
        product_category: '',
        product_unit: '',
        product_inwarehouse_number: null,
        product_single_price: null,
        product_create_person: JSON.parse(localStorage.getItem('pinia-userinfo')).name,
        in_memo: ''
    })

    //弹窗开关
    const dialogFormVisible = ref(false)
    // 打开弹窗
    const open = () => {
        dialogFormVisible.value = true
        formData.product_id = Date.now()
    }
    defineExpose({
        open
    })

    const rules = reactive({
        product_id: [
            { required: true, message: '请输入入库编号', trigger: 'blur' }
        ],
        product_name: [
            { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        product_category: [
            { required: true, message: '请选择产品类别', trigger: 'blur' }
        ],
        product_unit: [
            { required: true, message: '请选择产品类别', trigger: 'blur' }
        ],
        product_inwarehouse_number: [
            { required: true, message: '请输入产品入库数量', trigger: 'blur' }
        ],
        product_single_price: [
            { required: true, message: '请输入产品单价', trigger: 'blur' }
        ],
        product_create_person: [
            { required: true, message: '请入入库操作人', trigger: 'blur' }
        ]
    })
</script>
<style lang="scss" scoped>
    .dialog-content {
        display: flex;
        // justify-content: space-around;
        padding: 20px 30px;
    }

    :deep(.el-form-item) {
        margin: 30px;
    }
</style>